<template>
  <div class="container">
    <div class="template-display">
      <template v-for="(segment, index) in templateSegments" :key="index">
        <span v-if="segment.type === 'text'" class="text-segment">{{ segment.content }}</span>
        <input 
          v-else-if="segment.type === 'var'" 
          type="text" 
          v-model="variableValues[segment.content]" 
          :placeholder="segment.content"
          class="variable-input"
          :style="getInputStyle(segment.content)"
          @input="adjustInputWidth($event)"
        />
      </template>
    </div>
    <button @click="copyToClipboard" class="generate-button">复制本段</button>
    

  </div>
</template>

<script>
import { ref, computed, watch } from "vue"
import { Streamlit } from "streamlit-component-lib"
import { useStreamlit } from "./streamlit"

export default {
  name: "MyComponent",
  props: ["args"], // Python 传入的参数可通过 props 中的 "args" 访问
  setup(props) {
    useStreamlit() // 生命周期钩子，用于自动调整 Streamlit 组件大小

    // 变量值存储
    const variableValues = ref({})
    //
    
    // 从模板中提取变量名
    const extractVariables = (template) => {
      if (!template) return []
      const regex = /\{\{(.*?)\}\}/g
      const matches = [...template.matchAll(regex)]
      return matches.map(match => match[1].trim())
    }
    
    // 获取当前模板
    const getCurrentTemplate = () => {
      return props.args?.name || ''
    }
    
    // 将模板分割为文本段和变量段
    const getTemplateSegments = () => {
      const segments = []
      const template = getCurrentTemplate()
      
      if (!template) return segments
      
      const parts = template.split(/(\{\{.*?\}\})/g)
      
      for (const part of parts) {
        if (part.trim() === '') continue
        
        if (part.startsWith('{{') && part.endsWith('}}')) {
          // 变量段
          const varName = part.substring(2, part.length - 2).trim()
          segments.push({ type: 'var', content: varName })
          } else {
          // 文本段
          segments.push({ type: 'text', content: part })
        }
      }
      return segments
    }
    
    // 计算属性：模板段落
    const templateSegments = computed(() => {
      return getTemplateSegments()
    })
    
    // 初始化变量值
    const initializeVariables = () => {
      const segments = getTemplateSegments()
      segments.forEach(segment => {
        if (segment.type === 'var' && !variableValues.value.hasOwnProperty(segment.content)) {
          // 只在变量不存在时才初始化，避免覆盖用户已输入的值
          variableValues.value[segment.content] = segment.content
        }
      })
    }
    
    // 组件初始化时执行一次变量初始化
    initializeVariables()
    
    // 获取输入框样式
    const getInputStyle = (varName) => {
      // 计算文本宽度（粗略估计
      const text = variableValues.value[varName] || varName
      // 在响应式布局中，输入框宽度不要太大
      const width = Math.max(text.length * 18, 60) // 最小宽度60px
      const maxWidth = Math.min(width, 200) // 最大宽度200px
      return {
        width: `${maxWidth}px`
      }
    }
    
    // 调整输入框宽度
    const adjustInputWidth = (event) => {
      const input = event.target
      // 创建临时元素计算文本宽度
      const tempSpan = document.createElement('span')
      tempSpan.style.position = 'absolute'
      tempSpan.style.visibility = 'hidden'
      tempSpan.style.whiteSpace = 'nowrap'
      tempSpan.style.font = window.getComputedStyle(input).font
      tempSpan.textContent = input.value
      document.body.appendChild(tempSpan)
      
      // 在响应式布局中，限制输入框最大宽度
      const width = Math.min(Math.max(tempSpan.offsetWidth + 12, 60), 200) // 最小宽度60px，最大宽度200px
      input.style.width = `${width}px`
      
      document.body.removeChild(tempSpan)
    }
    
    // 生成完整内容
    const generateFullContent = () => {
      let fullContent = ''
      templateSegments.value.forEach(segment => {
        if (segment.type === 'text') {
          fullContent += segment.content
        } else if (segment.type === 'var') {
          fullContent += variableValues.value[segment.content] || ''
        }
      })
      return fullContent
    }
    
    // 复制内容到剪贴板
    const copyToClipboard = async () => {
      const content = generateFullContent()
      try {
        await navigator.clipboard.writeText(content)
        // 通知Streamlit组件值已更新
        Streamlit.setComponentValue(content)
      } catch (err) {
        console.error('复制失败:', err)
      }
    }
    
    return {
      templateSegments,
      variableValues,
      copyToClipboard,
      getInputStyle,
      adjustInputWidth
    }
  },
}
</script>

<style scoped>
.container {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 1rem;
  background-color: #ffffff;
  border-radius: 0.5rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* 模板展示区域样式 */
.template-display {
  width: 100%;                     /* 占满父容器宽度 */
  word-wrap: break-word;          /* 长单词自动换行 */
  overflow-wrap: break-word;      /* 兼容旧浏览器的换行处理 */
  display: block;                 /* 块级元素，独占一行 */
  box-sizing: border-box;         /* 计算宽高时包含内边距和边框 */
  line-height: 1.6;               /* 行高，提升可读性 */
  padding: 0.75rem 1rem;          /* 内边距，上下0.75rem，左右1rem */
  background-color: #f8f9fa;      /* 浅灰背景，突出显示区域 */
  border: 1px solid #e9ecef;      /* 细边框，颜色柔和 */
  border-radius: 0.5rem;          /* 圆角，视觉更友好 */
  margin-bottom: 1rem;            /* 与下方按钮保持间距 */
}

.text-segment {
  white-space: normal;
  display: inline;
  font-size: 1rem;
  color: #333;
}

.variable-input {
  border: 1px solid #e0e0e0;
  border-radius: 0.25rem;
  padding: 0.375rem 0.75rem;
  margin: 0 0.25rem;
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  min-width: 60px;
  max-width: 200px;
  box-sizing: border-box;
  font-size: 1rem;
  background-color: #ffffff;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.variable-input:focus {
  outline: none;
  border-color: #4f46e5;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.25);
}

.generate-button {
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  background-color: #4f46e5;
  color: white;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background-color 0.2s ease-in-out;
}

.generate-button:hover {
  background-color: #4338ca;
}

.generate-button:active {
  background-color: #3730a3;
}


</style>
